import React, { memo, useState } from 'react'
import filterData from '@/assets/data/filter_data.json'
import { EntireHeaderWrapper } from './style'
import Arrangement from '@/base-ui/arrangement'
import classNames from 'classnames'

const EntireHeader = memo(() => {
  // 当前点击的item数组
  const [selected, setSelected] = useState([])
  // 多选列表点击事件
  function clickHandler(item) {
    const list = [...selected]
    // 如果已经点击的则移除点击列表 变为未点击
    if(list.includes(item)) {
      const index = list.findIndex(e => e === item)
      list.splice(index, 1)
    }else {
      // 如果未点击则加入点击列表 变为点击
      list.push(item)
    }
    setSelected(list)
  }
  return (
    <EntireHeaderWrapper>
      <Arrangement>
        {
          filterData.map(item => (
            <div key={item} 
                 className={classNames('filter-item', {active: selected.includes(item)})}
                 onClick={e => clickHandler(item)}
            >
              {item}</div>
          ))
        }
      </Arrangement>
    </EntireHeaderWrapper>
  )
})

export default EntireHeader